<div class="ui-g">
    <div class="ui-g-12">
        <div class="card docs"> 
            
            <h1>Getting Started</h1>
            <p>Serenity is a true native application template for Angular and is distributed as a CLI project. If you don't have CLI installed already run the following commands to set it up. In case
            you have an application that do not use CLI, skip the <a href="#noncli">Integration with an Existing Non CLI Application</a> part.</p>
<pre>
npm install -g @angular-cli
</pre>

            <p>Once CLI is ready in your system, extract the contents of the Serenity zip file distribution, cd to the directory, 
            install the libraries from npm and then execute "ng serve" to run the application in your local environment at http://localhost:4200/.</p>
<pre>
cd serenity-ng
npm install
ng serve
</pre>

            <p>That's it, you may now start with the development of your application.</p>

            <h1>Important CLI Commands</h1>
            <p>Following commands are derived from CLI.</p>
<pre>
Run 'ng serve' for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

Run 'ng generate component component-name' to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.

Run 'ng build' to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github.io).

Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

Run 'ng help' for more options.
</pre>            
                                    
            <h1>Structure</h1>
            <p>Serenity consists of 3 main parts; the application layout, layout resources and theme resources for PrimeNG components. <i>app.component.html</i> inside app folder is the html template for the base layout, 
                required resources for the layout are placed inside the <i>src/assets/layout</i> folder and similarly theme resources are inside <i>src/assets/theme</i> folder. 
            </p>

            <h1>Template</h1>
            <p>Main layout is the html view of the app.component.ts, it is divided into a couple of sections such as topbar, sidebar, breadcrumb and footer. Here is the code for
                the main template. The component class app.component.ts implements the logic such as opening menus and layout modes.
            </p>
<pre>
&lt;div class="layout-wrapper" (click)="onWrapperClick()"
    [ngClass]="&#123;'layout-wrapper-static': layoutStatic,
                'layout-wrapper-active': mobileMenuActive&#125;"&gt;
    
    &lt;app-menu&gt;&lt;/app-menu&gt;

    &lt;div class="layout-main"&gt;
        &lt;app-topbar&gt;&lt;/app-topbar&gt;
        
        &lt;app-breadcrumb&gt;&lt;/app-breadcrumb&gt;
        
        &lt;div class="layout-content"&gt;
            &lt;router-outlet&gt;&lt;/router-outlet&gt;
        &lt;/div&gt;
        
        &lt;app-footer&gt;&lt;/app-footer&gt;
        &lt;div class="layout-main-mask" *ngIf="mobileMenuActive"&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;/div&gt;
</pre>

            <h1>Menu</h1>
            <p>Menu is a separate component defined in app.menu.component.ts file based on PrimeNG MenuModel API. In order to define the menuitems, 
            navigate to app.menu.component.ts and define your own model. Here is the menu component from the sample application. The helper
            app-submenu component is also available in the same file.</p>
<pre>
import &#123;Component, Input, OnInit, AfterViewInit, OnDestroy, ElementRef, Renderer, ViewChild&#125; from '@angular/core';
import &#123;trigger, state, style, transition, animate&#125; from '@angular/animations';
import &#123;Location&#125; from '@angular/common';
import &#123;Router&#125; from '@angular/router';
import &#123;MenuItem&#125; from 'primeng/primeng';
import &#123;AppComponent&#125; from './app.component';

@Component(&#123;
    selector: 'app-menu',
    templateUrl: './app.menu.component.html'
&#125;)
export class AppMenuComponent implements OnInit, AfterViewInit, OnDestroy &#123;

    ngOnInit() &#123;
        this.model = [
            &#123;label: 'Dashboard', icon: 'dashboard', routerLink: ['/']&#125;,
            &#123;
                label: 'Menu Modes', icon: 'settings',
                items: [
                    &#123;label: 'Static Menu', icon: 'view_quilt', command: (event) => &#123;this.app.layoutStatic = true; &#125;&#125;,
                    &#123;label: 'Overlay Menu', icon: 'flip_to-front', command: (event) => &#123;this.app.layoutStatic = false; &#125;&#125;,
                    &#123;label: 'Light Menu', icon: 'label', command: (event) => &#123;this.app.darkMenu = false; &#125;&#125;,
                    &#123;label: 'Dark Menu', icon: 'label_outline', command: (event) => &#123;this.app.darkMenu = true; &#125;&#125;
                ]
            &#125;,
            &#123;
                label: 'Layout Palette', icon: 'palette',
                items: [
                    &#123;
                        label: 'Flat', icon: 'format_paint',
                        items: [
                            &#123;label: 'Blue Grey - Green', icon: 'brush', command: (event) => &#123;this.changeLayout('bluegrey'); &#125;&#125;,
                            &#123;label: 'Indigo - Pink', icon: 'brush', command: (event) => &#123;this.changeLayout('indigo'); &#125;&#125;,
                            &#123;label: 'Pink - Amber', icon: 'brush', command: (event) => &#123;this.changeLayout('pink'); &#125;&#125;,
                            &#123;label: 'Deep Purple - Orange', icon: 'brush', command: (event) => &#123;this.changeLayout('deeppurple'); &#125;&#125;,
                            &#123;label: 'Blue - Amber', icon: 'brush', command: (event) => &#123;this.changeLayout('blue'); &#125;&#125;,
                            &#123;label: 'Light Blue - Blue Grey', icon: 'brush', command: (event) => &#123;this.changeLayout('lightblue'); &#125;&#125;,
                            &#123;label: 'Cyan - Amber', icon: 'brush', command: (event) => &#123;this.changeLayout('cyan'); &#125;&#125;,
                            &#123;label: 'Teal - Red', icon: 'brush', command: (event) => &#123;this.changeLayout('teal'); &#125;&#125;,
                            &#123;label: 'Green - Brown', icon: 'brush', command: (event) => &#123;this.changeLayout('green'); &#125;&#125;,
                            &#123;label: 'Light Green - Purple', icon: 'brush', command: (event) => &#123;this.changeLayout('lightgreen'); &#125;&#125;,
                            &#123;label: 'Lime - Blue Grey', icon: 'brush', command: (event) => &#123;this.changeLayout('lime'); &#125;&#125;,
                            &#123;label: 'Yellow - Teal', icon: 'brush', command: (event) => &#123;this.changeLayout('yellow'); &#125;&#125;,
                            &#123;label: 'Amber - Pink', icon: 'brush', command: (event) => &#123;this.changeLayout('amber'); &#125;&#125;,
                            &#123;label: 'Orange - Indigo', icon: 'brush', command: (event) => &#123;this.changeLayout('orange'); &#125;&#125;,
                            &#123;label: 'Deep Orange - Cyan', icon: 'brush', command: (event) => &#123;this.changeLayout('deeporange'); &#125;&#125;,
                            &#123;label: 'Brown - Cyan', icon: 'brush', command: (event) => &#123;this.changeLayout('brown'); &#125;&#125;,
                            &#123;label: 'Grey - Indigo', icon: 'brush', command: (event) => &#123;this.changeLayout('grey'); &#125;&#125;
                        ]
                    &#125;,
                    &#123;
                        label: 'Special', icon: 'format_paint',
                        items: [
                            &#123;label: 'Reflection', icon: 'brush', command: (event) => &#123;this.changeLayout('reflection'); &#125;&#125;,
                            &#123;label: 'Moody', icon: 'brush', command: (event) => &#123;this.changeLayout('moody'); &#125;&#125;,
                            &#123;label: 'Cityscape', icon: 'brush', command: (event) => &#123;this.changeLayout('cityscape'); &#125;&#125;,
                            &#123;label: 'Cloudy', icon: 'brush', command: (event) => &#123;this.changeLayout('cloudy'); &#125;&#125;,
                            &#123;label: 'Storm', icon: 'brush', command: (event) => &#123;this.changeLayout('storm'); &#125;&#125;,
                            &#123;label: 'Palm', icon: 'brush', command: (event) => &#123;this.changeLayout('palm'); &#125;&#125;,
                            &#123;label: 'Flatiron', icon: 'brush', command: (event) => &#123;this.changeLayout('flatiron'); &#125;&#125;
                        ]
                    &#125;,
                ]
            &#125;,
            &#123;
                label: 'Themes', icon: 'brush', badge: '5',
                items: [
                    &#123;label: 'Blue Grey - Green', icon: 'brush', command: (event) => &#123;this.changeTheme('bluegrey'); &#125;&#125;,
                    &#123;label: 'Indigo - Pink', icon: 'brush', command: (event) => &#123;this.changeTheme('indigo'); &#125;&#125;,
                    &#123;label: 'Pink - Amber', icon: 'brush', command: (event) => &#123;this.changeTheme('pink'); &#125;&#125;,
                    &#123;label: 'Purple - Pink', icon: 'brush', command: (event) => &#123;this.changeTheme('purple'); &#125;&#125;,
                    &#123;label: 'Deep Purple - Orange', icon: 'brush', command: (event) => &#123;this.changeTheme('deeppurple'); &#125;&#125;,
                    &#123;label: 'Blue - Amber', icon: 'brush', command: (event) => &#123;this.changeTheme('blue'); &#125;&#125;,
                    &#123;label: 'Light Blue - Blue Grey', icon: 'brush', command: (event) => &#123;this.changeTheme('lightblue'); &#125;&#125;,
                    &#123;label: 'Cyan - Amber', icon: 'brush', command: (event) => &#123;this.changeTheme('cyan'); &#125;&#125;,
                    &#123;label: 'Teal - Red', icon: 'brush', command: (event) => &#123;this.changeTheme('teal'); &#125;&#125;,
                    &#123;label: 'Green - Brown', icon: 'brush', command: (event) => &#123;this.changeTheme('green'); &#125;&#125;,
                    &#123;label: 'Light Green - Purple', icon: 'brush', command: (event) => &#123;this.changeTheme('lightgreen'); &#125;&#125;,
                    &#123;label: 'Lime - Blue Grey', icon: 'brush', command: (event) => &#123;this.changeTheme('lime'); &#125;&#125;,
                    &#123;label: 'Yellow - Teal', icon: 'brush', command: (event) => &#123;this.changeTheme('yellow'); &#125;&#125;,
                    &#123;label: 'Amber - Pink', icon: 'brush', command: (event) => &#123;this.changeTheme('amber'); &#125;&#125;,
                    &#123;label: 'Orange - Indigo', icon: 'brush', command: (event) => &#123;this.changeTheme('orange'); &#125;&#125;,
                    &#123;label: 'Deep Orange - Cyan', icon: 'brush', command: (event) => &#123;this.changeTheme('deeporange'); &#125;&#125;,
                    &#123;label: 'Brown - Cyan', icon: 'brush', command: (event) => &#123;this.changeTheme('brown'); &#125;&#125;,
                    &#123;label: 'Grey - Indigo', icon: 'brush', command: (event) => &#123;this.changeTheme('grey'); &#125;&#125;
                ]
            &#125;,
            &#123;
                label: 'Components', icon: 'list', badge: '2', badgeStyleClass: 'orange-badge',
                items: [
                    &#123;label: 'Sample Page', icon: 'desktop_mac', routerLink: ['/sample']&#125;,
                    &#123;label: 'Forms', icon: 'input', routerLink: ['/forms']&#125;,
                    &#123;label: 'Data', icon: 'grid_on', routerLink: ['/data']&#125;,
                    &#123;label: 'Panels', icon: 'content_paste', routerLink: ['/panels']&#125;,
                    &#123;label: 'Overlays', icon: 'content_copy', routerLink: ['/overlays']&#125;,
                    &#123;label: 'Menus', icon: 'menu', routerLink: ['/menus']&#125;,
                    &#123;label: 'Messages', icon: 'message', routerLink: ['/messages']&#125;,
                    &#123;label: 'Charts', icon: 'insert_chart', routerLink: ['/charts']&#125;,
                    &#123;label: 'File', icon: 'attach_file', routerLink: ['/file']&#125;,
                    &#123;label: 'Misc', icon: 'toys', routerLink: ['/misc']&#125;
                ]
            &#125;,
            &#123;
                label: 'Template Pages', icon: 'get_app',
                items: [
                    &#123;label: 'Empty Page', icon: 'hourglass_empty', routerLink: ['/empty']&#125;,
                    &#123;label: 'Landing Page', icon: 'flight_land', url: 'assets/pages/landing.html', target: '_blank'&#125;,
                    &#123;label: 'Login Page', icon: 'verified_user', url: 'assets/pages/login.html', target: '_blank'&#125;,
                    &#123;label: 'Error Page', icon: 'error', url: 'assets/pages/error.html', target: '_blank'&#125;,
                    &#123;label: '404 Page', icon: 'error_outline', url: 'assets/pages/404.html', target: '_blank'&#125;,
                    &#123;label: 'Access Denied Page', icon: 'security', url: 'assets/pages/access.html', target: '_blank'&#125;
                ]
            &#125;,
            &#123;
                label: 'Menu Hierarchy', icon: 'menu',
                items: [
                    &#123;
                        label: 'Submenu 1', icon: 'subject',
                        items: [
                            &#123;
                                label: 'Submenu 1.1', icon: 'subject',
                                items: [
                                    &#123;label: 'Submenu 1.1.1', icon: 'subject'&#125;,
                                    &#123;label: 'Submenu 1.1.2', icon: 'subject'&#125;,
                                    &#123;label: 'Submenu 1.1.3', icon: 'subject'&#125;,
                                ]
                            &#125;,
                            &#123;
                                label: 'Submenu 1.2', icon: 'subject',
                                items: [
                                    &#123;label: 'Submenu 1.2.1', icon: 'subject'&#125;,
                                    &#123;label: 'Submenu 1.2.2', icon: 'subject'&#125;
                                ]
                            &#125;,
                        ]
                    &#125;,
                    &#123;
                        label: 'Submenu 2', icon: 'subject',
                        items: [
                            &#123;
                                label: 'Submenu 2.1', icon: 'subject',
                                items: [
                                    &#123;label: 'Submenu 2.1.1', icon: 'subject'&#125;,
                                    &#123;label: 'Submenu 2.1.2', icon: 'subject'&#125;,
                                    &#123;label: 'Submenu 2.1.3', icon: 'subject'&#125;
                                ]
                            &#125;,
                            &#123;
                                label: 'Submenu 2.2', icon: 'subject',
                                items: [
                                    &#123;label: 'Submenu 2.2.1', icon: 'subject'&#125;,
                                    &#123;label: 'Submenu 2.2.2', icon: 'subject'&#125;
                                ]
                            &#125;,
                        ]
                    &#125;
                ]
            &#125;,
            &#123;label: 'Utils', icon: 'build', routerLink: ['/utils']&#125;,
            &#123;label: 'Documentation', icon: 'find_in_page', routerLink: ['/documentation']&#125;,
            &#123;label: 'Buy Now', icon: 'credit_card', url: 'https://www.primefaces.org/store'&#125;
        ];
    &#125;
&#125;
</pre>
            
            <h1>Integration with an Existing CLI Project</h1>
            <p>To setup Serenity in an existing project, copy the <i>src/assets</i> folder to your projects folder with the same name 
                and replace the contents of app.component.ts, app.component.html with their counterparts in Serenity under <i>src/app</i> folder.</p>
            
            <p>Dependencies of Serenity are listed below and needs to be added to package.json</p>
<pre>
"primeng": "^4.2.0",             //required: PrimeNG components
"jquery": "^3.1.1",              //optional: schedule component and nanoscroller
"chart.js": "^2.4.0",            //optional: chart 
"fullcalendar": "^3.1.0",        //optional: schedule
"moment": "^2.17.1",             //optional: chart and schedule
"quill": "^1.1.8",               //optional: editor
"nanoscroller": "0.8.7",         //optional: nanoscroller
</pre>
                        
            <p>Add PrimeNG CSS at styles section in angular-cli.json and optional dependencies.</p>

<pre>
"styles": [
    "../node_modules/primeng/resources/primeng.min.css",        //required: PrimeNG components
    "../node_modules/fullcalendar/dist/fullcalendar.min.css",   //optional: schedule
    "../node_modules/quill/dist/quill.snow.css",                //optional: editor
    "../node_modules/nanoscroller/bin/css/nanoscroller.css",    //optional: nanoscroller
    "styles.scss"                                               //your styles and overrides
],
</pre>

            <p>Add the following scripts to your angular-cli.json depending on the optional dependencies.</p>
<pre>
"scripts": [
    "../node_modules/jquery/dist/jquery.js",                                //optional: schedule and nanoscroller
    "../node_modules/nanoscroller/bin/javascripts/jquery.nanoscroller.js",  //optional: nanoscroller
    "../node_modules/moment/moment.js",                                     //optional: schedule and charts
    "../node_modules/chart.js/dist/Chart.js",                               //optional: charts
    "../node_modules/fullcalendar/dist/fullcalendar.js",                    //optional: schedule
    "../node_modules/quill/dist/quill.js"                                   //optional: editor
],
</pre>

            <p>Last part is adding theme and layout css files, in the CLI app they are defined using link tags in index.html so the demo can switch them on
            the fly by changing the path however if this is not a requirement, you may also add them to the styles configuration so they go inside the bundle.</p>

            <h1 id="noncli">Integration with an Existing Non-CLI Project</h1>
            <p>For an existing project that do not use CLI, setup steps are more or less similar. Start with installing the dependencies listed above in package.json</p>
            <p>Copy the <i>src/assets</i> folder to your application and include the resources listed above with a module bundler like webpack or using link-script tags.</p>
            <p>Finally copy the contents of app.component.html to your application's main component template such as <i>app/application.html</i> along
            with the sub components which are app.menu.component.ts, app.topbar.component.ts and app.footer.component.ts.</p>
                                    
            <h1>Theme</h1>    
            <p>Serenity provides 18 PrimeNG themes out of the box, setup of a theme simple including the css of theme to your page that are located inside resources/theme folder.</p>
            
            <ul>
                <li>theme-amber</li>
                <li>theme-blue</li>
                <li>theme-bluegrey</li>
                <li>theme-brown</li>
                <li>theme-cyan</li>
                <li>theme-deeporange</li>
                <li>theme-deeppurple</li>
                <li>theme-green</li>
                <li>theme-grey</li>
                <li>theme-indigo</li>
                <li>theme-lightblue</li>
                <li>theme-lightgreen</li>
                <li>theme-lime</li>
                <li>theme-orange</li>
                <li>theme-pink</li>
                <li>theme-purple</li>
                <li>theme-teal</li>
                <li>theme-yellow</li>
            </ul>
            
            <p>A custom theme can be developed by the following steps.</p>
            <ul>
                <li>Choose a custom theme name such as theme-myown.</li>
                <li>Create a file named theme-myown.scss under <i>assets/theme folder</i>.</li>
                <li>Define the variables listed below and import the <i>/sass/theme/_theme.scss</i> file.</li>
                <li>Build the scss to generate css</li>
                <li>Include the generated theme.css to your page.</li>
            </ul>
            
            <p>Here are the variables required to create a theme, you may need to change the last line according to the 
                relative path of the sass folder in your application.</p>
                
<pre>
$primaryColor:#3f51b5;
$primaryDarkColor:#283593;
$primaryLightColor:#9fa8da;
$primaryLightestColor:#e8eaf6;
$primaryTextColor:#ffffff;
$accentColor:#E91E63;
$accentDarkColor: #ad1457;
$accentLightColor: #f48fb1;
$accentTextColor: #ffffff;

@import '../sass/theme/_theme';
</pre> 
                
            <p> An example sass command to compile the css would be;</p>
                
<pre>
sass src/assets/theme-myown/theme.scss src/assets/theme-myown/theme.css
</pre> 

            <p>Watch mode is handy to avoid compiling everytime when a change is made, instead use the following command
            so that sass generates the file whenever you make a customization. This builds all css files whenever a change is made to any scss file.</p>
<pre>
sass -w resources/ --sourcemap=none
</pre>

            <p>Same can also be applied to layout itself;</p>
            <ul>
                <li>Choose a layout name such as layout-myown.</li>
                <li>Create an empty file named layout-myown.scss inside <i>assets/layout/css</i> folder.</li>
                <li>Define the variables listed below and import the <i>/sass/layout/_layout.scss</i> file.</li>
                <li>Build the scss to generate css</li>
                <li>Serve the css by importing it using a link tag or a bundler.</li>
            </ul>
            
            <p>Here are the variables required to create a layout, you may need to change the last line according to the 
                relative path of the sass folder in your application.</p>
            
<pre>
/* Sidebar */
$sidebarLogoBgColor:#283593;
$sidebarBgColor:#ffffff;
$darkSidebarBgColor:#424242;

/* Primary */
$primaryColor:#3f51b5;
$primaryDarkColor:#283593;
$primaryLightColor:#9fa8da;
$primaryLightestColor:#e8eaf6;
$primaryTextColor:#ffffff;

/* Accent */
$accentColor:#E91E63;
$accentLightColor:#f48fb1;
$accentTextColor:#ffffff;

/* Topbar */
$topbarTextColor:#e8eaf6;
$topbarIconColor:#e8eaf6;

/* Submenu */
$submenuBgColor:#EEEEEE;
$darkSubmenuBgColor:#616161;

/* Default MenuItem */
$menuitemTextColor:#212121;
$menuitemIconTextColor:#616161;

/* Hover MenuItem */
$menuitemHoverBgColor:#E0E0E0;
$menuitemHoverTextColor:#212121;
$menuitemHoverIconTextColor:#212121;

/* Active MenuItem */
$menuitemActiveBgColor:#3f51b5;
$menuitemActiveTextColor:#ffffff;
$menuitemActiveIconTextColor:#ffffff;
$subMenuitemActiveTextColor:#3f51b5;
$subMenuitemActiveIconTextColor:#3f51b5;

/* Dark Default MenuItem */
$darkMenuitemTextColor:#dee0e3;
$darkMenuitemIconTextColor:#dee0e3;

/* Dark Hover MenuItem */
$darkMenuitemHoverBgColor:#545454;
$darkMenuitemHoverTextColor:#ffffff;
$darkMenuitemHoverIconTextColor:#ffffff;

/* Dark Active MenuItem */
$darkMenuitemActiveBgColor:#3f51b5;
$darkMenuitemActiveTextColor:#ffffff;
$darkMenuitemActiveIconTextColor:#ffffff;
$darksubMenuitemActiveTextColor:#9fa8da;
$darksubMenuitemActiveIconTextColor:#9fa8da;

@import '../../sass/layout/_layout';

</pre> 
            
            <p>For both cases, several .scss files such as _layout.scss, _theme.scss or _variables.scss has to be present relative to your scss files, these are available inside the resources/sass folder in the distribution.</p>
            
            <h1>Common SASS Variables</h1>
            <p>In case you'd like to customize the shared variables, the _variables.scss files are where the options are defined for layout and theme.</p>
            
<h3>sass/_variables.scss</h3>
<pre>
/******************************/
/*           Common           */
/******************************/
$fontSize:14px;
$fontFamily:"Roboto","Helvetica Neue",sans-serif;
$textColor:#212121;
$textSecondaryColor:#757575;
$lineHeight:18px;
$borderRadius:3px;
$dividerColor:#dbdbdb;
$dividerLightColor:#f8f8f8;
$transitionDuration:.3s;
$iconWidth:20px;
$iconHeight:20px;
$iconFontSize:20px;
$hoverBgColor:#e8e8e8;
$hoverTextColor:#000000;

/* Predefined Colors */
$blue:#147df0;
$pink:#ed3c76;
$green:#3e9018;
$red:#da2f31;
$orange:#ffb200;
$teal:#599597;
$purple:#633ea5;
$black:#000000;
$yellow:#ffd644;
$grayBgColor:#757575;
</pre> 

<h3>sass/theme/_variables.scss</h3>
<pre>
@import './common';

$headerPadding:.625em 1em;
$headerFontSize:1em;

$contentPadding:.625em 1em;
$contentBorderColor:#d8d8d8;
$contentBgColor:#ffffff;

$inputBorderColor:#bdbdbd;
$inputFontSize:1em;
$inputHeaderFontSize:1em;
$inputOptionFontSize:1em;
$inputHeaderPadding:.625em 1em;
$invalidInputLabelColor:#e62a10;
$invalidInputBorderColor:#e62a10;
$inputGroupAddonBgColor:#e6e6e6;

$buttonFontSize:1em;

$listItemPadding:.625em 1em;

$radioButtonBorderColor:#757575;
$checkboxBorderColor:#757575;

$dataTableBorderColor:#cacaca;
$dataTableRowBgColorEven:#f4f4f4;
</pre>   

<h3>sass/layout/_variables.scss</h3>
<pre>
@import './common';

$bodyBgColor:#F5F5F5;
$topbarSubmenuHoverBgColor:#f1f2f7;
$topbarMobileMenuBgColor:#ffffff;
$mobileBreakpoint:1024px;
$contentMobileMaskBgColor:#424242;
</pre>     
                                    
            <h1>Menu Modes</h1>
            <p>Menu has 2 modes; static and overlay. Layout container element in application.html is used to define which mode to use by adding specific classes. List
            below indicates the style classes for each mode.</p>
            
            <ul>
                <li>Static: "layout-wrapper layout-wrapper-static"</li>
                <li>Overlay: "layout-wrapper"</li>
            </ul> 
            
            <p>It is also possible to leave the choice to the user by keeping the preference at a component and using an expression to bind it so that user can switch between modes. Sample
            application has an example implementation of such use case. Refer to app.component.ts for an example.</p>    
            
            <h1>Dark Menu</h1>
            <p>In addition to the layout options, menu also provides a dark alternative to the light mode. This mode is enabled by adding "layout-sidebar-dark" style class
            to "layout-sidebar" element in app.menu.component.html.</p> 
                            
            <h1>Breadcrumb</h1>
            <p>Serenity has an optional built-in breadcrumb section right below the topbar. The items are dynamically generated using a BreadcrumbService where each 
            main page that goes into the router-outlet should provide a collection of MenuItem instances. Here is an example component that updates the breadcrumb.</p>
<pre>
import &#123;Component&#125; from '@angular/core';
import &#123;BreadcrumbService&#125; from '../../breadcrumb.service';

@Component(&#123;
    templateUrl: './emptydemo.component.html'
&#125;)
export class ControlPanelComponent &#123;
    
    constructor(private breadcrumbService: BreadcrumbService) &#123;
        this.breadcrumbService.setItems([
            &#123;label: 'Admin'&#125;,
            &#123;label: 'Control Panel', routerLink: ['/controlpanel']&#125;
        ]);
    &#125;
    
&#125;
</pre>
            <p>Result will be reflected at application breadcrumb component such as "Home Icon" -> "Admin" -> "Control Panel".</p>
                            
            <h1>Grid CSS</h1>
            <p>Serenity uses PrimeNG Grid CSS (ui-g-*) throughout the samples, we strongly suggest using Grid CSS as your layout framework as it is well tested and supported by PrimeNG. Grid CSS is
            available inside primeng.css.</p> 
            
        </div>
    </div>
</div>